<template>
	<WithFixedPageContainer
		v-model:page="page"
		@size-change="handleSizeChange"
		@current-change="handleCurrentChange"
	>
		<!-- 搜索表单 -->
		<div class="bg-white p-2 rounded-md">
			<BasicTableFrom :formList="formList" @search="handleSearch">
				<template #menu>
					<el-button type="primary" @click="handleAddNew">新增司机</el-button>
					<el-button type="primary" @click="handleExport">批量导入</el-button>
				</template>
			</BasicTableFrom>
		</div>

		<!-- 表格 -->
		<template #table>
			<div class="h-full overflow-auto">
				<BasicTable
					:data="tableData"
					:option="tableColumns"
					v-model:page="page"
					:table-loading="loading"
				>
					<template #monthlyTrips="{ row }">
						<el-link type="primary" @click="handlePullCounts(row)">{{
							row.monthlyTrips
						}}</el-link>
					</template>
					<template #totalTrips="{ row }">
						<el-link type="primary" @click="handlePullCounts(row)">{{
							row.totalTrips
						}}</el-link>
					</template>
					<!-- 自定义列插槽 -->
					<template #menu="{ row }">
						<el-button text type="primary" @click="handleDetail(row)"
							>详情</el-button
						>
						<el-button text type="primary" @click="handleFrozen(row)">
							{{ row.status == '启用' ? '冻结' : '解冻' }}
						</el-button>
						<el-popover placement="top" trigger="click">
							<template #reference>
								<el-button text type="primary" ref="moreBtnRef">更多</el-button>
							</template>
							<div class="table-more-btns">
								<el-button text type="primary" @click="handleEdit(row)"
									>编辑</el-button
								>
								<!-- 增加车辆 -->
								<el-button text type="primary" @click="handlevehicleCar(row)"
									>增加</el-button
								>
								<!-- 车辆解绑 -->
								<el-button text type="danger" @click="handleUntieCar(row)"
									>解绑</el-button
								>
							</div>
						</el-popover>
					</template>
				</BasicTable>
			</div>
		</template>
		<AddDriver ref="addDriverRef" />
		<UnbindVehicle ref="unbindVehicleRef" />
		<AddVehicle ref="addVehicleRef" />
		<TripList ref="tripListRef" />
	</WithFixedPageContainer>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
// 新增司机
import AddDriver from './components/addDriver.vue';
const addDriverRef = ref();
// 解绑车辆
import UnbindVehicle from './components/UnbindVehicle.vue';
const unbindVehicleRef = ref();
// 增加车辆
import AddVehicle from './components/AddVehicle.vue';
const addVehicleRef = ref();
// 拉运趟次
import TripList from './components/TripList.vue';
const tripListRef = ref();
// 搜索表单
const formList = computed((): BasicTableNameSpace.FormItemType[] => [
	{
		key: 'keyword',
		type: 'input-text',
		label: '关键字:',
		placeholder: '司机姓名/联系电话',
		clearable: true,
		suffixIcon: 'Search',
	},
	{
		key: 'status',
		type: 'select',
		label: '状态:',
		placeholder: '请选择状态',
		clearable: true,
		options: [
			{ label: '全部', value: '' },
			{ label: '启用', value: 'enabled' },
			{ label: '冻结', value: 'disabled' },
		],
	},
]);

// 表格列配置
const tableColumns = {
	index: true,
	menuWidth: 160,
	column: [
		{ label: '姓名', prop: 'name' },
		{ label: '身份证号', prop: 'idNumber', overHidden: true },
		{ label: '联系电话', prop: 'phone' },
		{ label: '年龄', prop: 'age' },
		{ label: '性别', prop: 'gender' },
		{ label: '驾驶类型', prop: 'licenseType', width: 100 },
		{ label: '准驾车辆', prop: 'vehicles', width: 180, overHidden: true },
		{ label: '本月拉运趟次', prop: 'monthlyTrips', width: 120 },
		{ label: '累计拉运趟次', prop: 'totalTrips', width: 120 },
		{ label: '状态', prop: 'status' },
	],
};

// 分页配置
const page = reactive({
	total: 0,
	currentPage: 1,
	pageSize: 10,
});

// 表格数据
const tableData = ref([
	{
		id: 1,
		name: '张三',
		idNumber: '510XXXXXXXXXXXXXXX',
		phone: '135XXXXXXXX',
		age: 30,
		gender: '男',
		licenseType: 'B1',
		vehicles: '川A12345,川A54321',
		monthlyTrips: 30,
		totalTrips: 2134,
		status: '启用',
	},
]);
const loading = ref(false);

// 搜索参数
const searchParams = reactive({
	keyword: '',
	status: '',
});

// 方法定义
// 查询
function handleSearch(data: any) {
	searchParams.keyword = data.keyword;
	searchParams.status = data.status;
	// TODO: 调用接口获取数据
	getList();
}
// 批量导入
function handleExport() {
	// TODO: 批量导入逻辑
}
// 详情
function handleDetail(row: any) {
	// TODO: 详情逻辑
	console.log(row);
}

// 新增司机
function handleAddNew() {
	addDriverRef.value?.open();
}

// 编辑司机
function handleEdit(row: any) {
	addDriverRef.value?.open(row);
}
// 冻结账号 updateStatus
async function handleFrozen(row: any) {
	try {
		await ElMessageBox.confirm(
			row.status == '启用'
				? '确定要把该驾驶员账号进行冻结？冻结后该驾驶员将不能进行运输作业。'
				: '确定要把该驾驶员账号进行解冻 ',
		);
	} catch {
		return;
	}
	try {
		/*let obj = {
        id: row.id,
        status: row.status == "启用" ? "0" : "1",
      };*/
		// TODO: 调用接口更新状态
		getList();
		ElMessage.success('操作成功');
	} catch (err: any) {
		ElMessage.error(err?.msg || '操作失败');
	}
}
// 增加车辆
function handlevehicleCar(row: any) {
	let carArr = row.vehicles.split(',');
	addVehicleRef.value?.open(carArr, carArr);
}
// 车辆解绑
function handleUntieCar(row: any) {
	let carArr = row.vehicles.split(',');
	unbindVehicleRef.value?.open(carArr);
}
// 拉运趟次
function handlePullCounts(row: any) {
	tripListRef.value?.open({ type: 'month', driver: row.name });
}

function handleSizeChange(val: number) {
	page.pageSize = val;
	getList();
}

function handleCurrentChange(val: number) {
	page.currentPage = val;
	getList();
}

function getList() {
	loading.value = true;
	// TODO: 调用接口获取数据
	setTimeout(() => {
		loading.value = false;
	}, 500);
}

// 初始化加载
getList();
</script>

<style lang="scss" scoped>
.el-input {
	--el-input-width: auto;
}
</style>
